<div>
    <header class="fixed top-0 bg-white w-full">
        <nav aria-label="Top" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="flex h-16 items-center">
                <!-- Logo -->
                <div class="ml-4 flex lg:ml-0">
                    <a href="#">
                        <span class="sr-only">Your Company</span>
                        <img class="h-8 w-auto"
                             src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="">
                    </a>
                </div>

                <!-- Flyout menus -->
                <div class="hidden lg:ml-8 lg:block lg:self-stretch">
                    <div class="flex h-full space-x-8">
                        @foreach($navigations as $navigation)
                            <a class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800 {{ ('/' . request()->path() == $navigation['route']) ? 'active' : '' }}"
                               href="{{ $navigation['route'] }}" data-search-url="">
                                {{ $navigation['name'] }}

                            </a>
                        @endforeach
                    </div>
                </div>

                <div class="hidden sm:block ml-auto flex items-center">
                    <!-- Search -->
                    <div class="flex lg:ml-6">
                        <form wire:submit="search" class="flex items-center">
                            <input wire:model="keyword" type="text"
                                   class="block rounded-md py-1.5 pl-2 mr-2 text-gray-900  placeholder:text-gray-400 sm:text-sm sm:leading-6 outline-none focus:border-gray-100 border"
                                   placeholder="搜索内容">

                            <button type="submit">
                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                     stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
                                </svg>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </nav>
    </header>
</div>

